<template>
    <div>
        <van-nav-bar left-text="" right-text="闪验登录" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />

        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="loginData.username" name="用户名" label="+86" placeholder="请输入手机号"
                    :rules="[{ pattern, message: '请填写用户名' }]" />
                <van-cell-group inset>
                    <van-field v-model="sms" center clearable label="" placeholder="请输入短信验证码">
                        <template #button>
                            <van-button size="small" type="primary">发送验证码</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <van-field v-model="loginData.password"  placeholder="请输入密码" style="width: 100%; height: 50px; border-bottom: 2px solid red;" :rules="[{ required: true, message: '请填写用户名' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" @click="submit" style="background: red;">
                    登录
                </van-button>
            </div>
            <p style="text-align: center; color: blue;">登录遇到问题</p>
        </van-form>

    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const loginData = reactive({
    username: '',
    password: '',
    passwordok: ''
})

import { loginApi } from '@/api/api'
import { useRouter } from 'vue-router'
const router = new useRouter()
console.log(53);

const submit = () => {
    console.log(53);
    loginApi(loginData.username, loginData.password).then((res) => {
        console.log(res);
        console.log(53);
        router.push('/index/home')
        localStorage.getItem('username',loginData.username)
        localStorage.getItem('token',res.data.data.token)

    })
}
const dianj = () => {
    console.log('获取验证码');
    setTimeout(() => {

    }, 3000)
}
 const validator = (val) => /1\d{10}/.test(val);

</script>

<style lang="scss" scoped></style>